<template>
  <div class="system-section">
    <a-row :gutter="[16, 16]">
      <a-col :span="16">
        <a-card title="⚠️ 系统健康监控" class="system-card">
          <div class="system-status">
            <div
              v-for="service in systemServices"
              :key="service.name"
              class="service-item"
            >
              <div class="service-header">
                <div class="service-name">{{ service.name }}</div>
                <div class="service-status" :class="`status-${service.status}`">
                  <div class="status-dot"></div>
                  {{ service.statusText }}
                </div>
              </div>
              <div class="service-details">
                <div class="service-metric">
                  <span class="metric-name">响应时间:</span>
                  <span class="metric-value">{{ service.responseTime }}</span>
                </div>
                <div class="service-metric">
                  <span class="metric-name">{{ service.metricName }}:</span>
                  <span class="metric-value">{{ service.metricValue }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 近期错误日志 -->
          <a-divider>近期系统日志</a-divider>
          <div class="error-logs">
            <div
              v-for="log in errorLogs"
              :key="log.id"
              class="error-log-item"
              :class="`log-${log.level}`"
            >
              <div class="log-time">{{ log.time }}</div>
              <div class="log-content">{{ log.message }}</div>
              <div class="log-level">{{ log.level.toUpperCase() }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="💾 数据库性能" class="system-card">
          <div class="db-metrics">
            <div class="db-metric-item">
              <div class="metric-header">
                <span class="metric-title">查询性能</span>
                <span class="metric-status good">优秀</span>
              </div>
              <div class="metric-chart">
                <div class="metric-bar">
                  <div class="metric-fill" style="width: 85%"></div>
                </div>
                <span class="metric-text">85% 查询 小 100ms</span>
              </div>
            </div>

            <div class="db-metric-item">
              <div class="metric-header">
                <span class="metric-title">连接池</span>
                <span class="metric-status normal">正常</span>
              </div>
              <div class="metric-chart">
                <div class="metric-bar">
                  <div class="metric-fill" style="width: 60%"></div>
                </div>
                <span class="metric-text">15/25 连接使用中</span>
              </div>
            </div>

            <div class="db-metric-item">
              <div class="metric-header">
                <span class="metric-title">缓存命中率</span>
                <span class="metric-status good">优秀</span>
              </div>
              <div class="metric-chart">
                <div class="metric-bar">
                  <div class="metric-fill" style="width: 92%"></div>
                </div>
                <span class="metric-text">92% 命中率</span>
              </div>
            </div>

            <div class="db-metric-item">
              <div class="metric-header">
                <span class="metric-title">存储使用</span>
                <span class="metric-status warning">注意</span>
              </div>
              <div class="metric-chart">
                <div class="metric-bar">
                  <div class="metric-fill warning" style="width: 78%"></div>
                </div>
                <span class="metric-text">7.8GB / 10GB</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  // 系统服务状态
  const systemServices = ref([
    {
      name: 'Elasticsearch',
      status: 'healthy',
      statusText: '正常',
      responseTime: '12ms',
      metricName: '索引文档',
      metricValue: '1,247条',
    },
    {
      name: 'MySQL数据库',
      status: 'healthy',
      statusText: '正常',
      responseTime: '8ms',
      metricName: '活跃连接',
      metricValue: '15个',
    },
    {
      name: 'Redis缓存',
      status: 'healthy',
      statusText: '正常',
      responseTime: '3ms',
      metricName: '内存使用',
      metricValue: '245MB',
    },
    {
      name: '文件存储',
      status: 'warning',
      statusText: '注意',
      responseTime: '45ms',
      metricName: '存储使用',
      metricValue: '82%',
    },
  ]);

  // 错误日志
  const errorLogs = ref([
    {
      id: 1,
      time: '10:30:45',
      level: 'info',
      message: '用户登录成功 - admin',
    },
    {
      id: 2,
      time: '10:25:12',
      level: 'warn',
      message: '搜索查询耗时较长: 856ms',
    },
    {
      id: 3,
      time: '10:20:33',
      level: 'info',
      message: '文章发布成功 - ID: 1247',
    },
    {
      id: 4,
      time: '10:15:22',
      level: 'error',
      message: '文件上传失败: 文件大小超限',
    },
  ]);
</script>

<style lang="less" scoped>
  .system-section {
    .system-card {
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      :deep(.arco-card-header) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 20px 24px 16px;

        .arco-card-header-title {
          font-size: 16px;
          font-weight: 600;
          color: #2d3748;
        }
      }

      .system-status {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        margin-bottom: 24px;

        .service-item {
          padding: 20px;
          background: rgba(255, 255, 255, 0.6);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 16px;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
          }

          .service-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            .service-name {
              font-weight: 600;
              color: #2d3748;
              font-size: 15px;
            }

            .service-status {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 12px;
              padding: 6px 12px;
              border-radius: 20px;
              font-weight: 500;

              .status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
              }

              &.status-healthy {
                background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
                color: white;

                .status-dot {
                  background: rgba(255, 255, 255, 0.9);
                }
              }

              &.status-warning {
                background: linear-gradient(135deg, #fcb045 0%, #fd1d1d 100%);
                color: white;

                .status-dot {
                  background: rgba(255, 255, 255, 0.9);
                }
              }

              &.status-error {
                background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
                color: white;

                .status-dot {
                  background: rgba(255, 255, 255, 0.9);
                }
              }
            }
          }

          .service-details {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #718096;

            .service-metric {
              .metric-name {
                margin-right: 4px;
                font-weight: 500;
              }

              .metric-value {
                font-weight: 600;
                color: #2d3748;
              }
            }
          }
        }
      }

      .error-logs {
        max-height: 240px;
        overflow-y: auto;
        padding-right: 4px;

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.05);
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.2);
          border-radius: 2px;
        }

        .error-log-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 16px;
          margin-bottom: 8px;
          border-radius: 12px;
          font-size: 12px;
          transition: all 0.3s ease;

          &:hover {
            transform: translateX(4px);
          }

          &.log-info {
            background: linear-gradient(
              135deg,
              rgba(102, 126, 234, 0.1) 0%,
              rgba(118, 75, 162, 0.1) 100%
            );
            border-left: 4px solid #667eea;
          }

          &.log-warn {
            background: linear-gradient(
              135deg,
              rgba(252, 176, 69, 0.1) 0%,
              rgba(253, 29, 29, 0.1) 100%
            );
            border-left: 4px solid #fcb045;
          }

          &.log-error {
            background: linear-gradient(
              135deg,
              rgba(255, 107, 107, 0.1) 0%,
              rgba(238, 90, 36, 0.1) 100%
            );
            border-left: 4px solid #ff6b6b;
          }

          .log-time {
            min-width: 60px;
            color: #718096;
            font-family: monospace;
            font-weight: 500;
          }

          .log-content {
            flex: 1;
            color: #2d3748;
            font-weight: 500;
          }

          .log-level {
            min-width: 50px;
            text-align: center;
            padding: 4px 8px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 10px;

            &:contains('INFO') {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
            }

            &:contains('WARN') {
              background: linear-gradient(135deg, #fcb045 0%, #fd1d1d 100%);
              color: white;
            }

            &:contains('ERROR') {
              background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
              color: white;
            }
          }
        }
      }

      .db-metrics {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .db-metric-item {
          .metric-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .metric-title {
              font-weight: 600;
              color: #2d3748;
              font-size: 15px;
            }

            .metric-status {
              padding: 6px 12px;
              border-radius: 20px;
              font-size: 12px;
              font-weight: 500;

              &.good {
                background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
                color: white;
              }

              &.normal {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
              }

              &.warning {
                background: linear-gradient(135deg, #fcb045 0%, #fd1d1d 100%);
                color: white;
              }
            }
          }

          .metric-chart {
            .metric-bar {
              width: 100%;
              height: 8px;
              background: rgba(0, 0, 0, 0.08);
              border-radius: 20px;
              overflow: hidden;
              margin-bottom: 8px;

              .metric-fill {
                height: 100%;
                background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
                border-radius: 20px;
                transition: width 0.3s ease;

                &.warning {
                  background: linear-gradient(135deg, #fcb045 0%, #fd1d1d 100%);
                }
              }
            }

            .metric-text {
              font-size: 12px;
              color: #718096;
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  // 响应式适配
  @media (max-width: 768px) {
    .system-section {
      .system-card {
        border-radius: 16px;

        .system-status {
          grid-template-columns: 1fr;
          gap: 10px;

          .service-item {
            padding: 16px;
            border-radius: 12px;

            .service-header {
              margin-bottom: 12px;

              .service-name {
                font-size: 14px;
              }

              .service-status {
                padding: 4px 8px;
                font-size: 11px;
              }
            }
          }
        }

        .error-logs {
          max-height: 200px;

          .error-log-item {
            padding: 10px 12px;
            margin-bottom: 6px;
            border-radius: 10px;

            .log-time {
              min-width: 50px;
              font-size: 10px;
            }

            .log-content {
              font-size: 11px;
            }
          }
        }

        .db-metrics {
          gap: 16px;

          .db-metric-item {
            .metric-header {
              margin-bottom: 10px;

              .metric-title {
                font-size: 14px;
              }

              .metric-status {
                padding: 4px 8px;
                font-size: 11px;
              }
            }

            .metric-chart {
              .metric-bar {
                height: 6px;
                margin-bottom: 6px;
              }

              .metric-text {
                font-size: 11px;
              }
            }
          }
        }
      }
    }
  }
</style>
